/*
    请看 :    每条关键的css属性都有注释
           自己书写css样式时 新建css文件 书写规格如下 并注释出 css的效果 修改原因
           (若有需要修改此css样式 请联系me)
          每个 区域的 css样式 已经分开
*/

html, body, div, table, tr, td, select, textarea {
    margin: 0;
    padding: 0;
    font-family: "微软雅黑", serif;
}

table{border-collapse: collapse;}


/*------------------华丽的分隔线--------------------*/

/*
    整个容器设置
*/
.content {
    width: 960px;
    margin: 0 auto;
}

/*------------------华丽的分隔线--------------------*/

/*
    上方标题区域
*/
.title {
    height: 50px;
    line-height: 50px;
    color: white;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    background-color: #08a9df;
}


/*------------------华丽的分隔线--------------------*/

/*
    信息输入table 区域 class='input'
*/
table.input {
    background-color: white;
    width: 800px; /*整个信息输入区域为800px*/
    margin: 0 auto;
    margin-top: 30px; /*设置距离上方标题区域 30px*/

    /*设置边框 防止边框有重叠变粗的情况 和下面 .input td 相配合*/
    border: 1px solid #B6B6B6;
    border-bottom: none;
}

.input tr {
    height: 38px;
    /*设置行高为38px 若想改动
        请注意修改 input[type='text'] 选择器中
        height 和line-height(需要给border预留 2px 即要小于tr行高2px)
        否则会造成 输入框行高与其他 非textarea所在行高不一致*/
}

.input td {
    /*设置边框 防止边框有重叠变粗的情况 和上面 table.input 中2行border属性相配合*/
    border-bottom: 1px solid #B6B6B6;
}

/* 信息输入区域下的每行中第一个 td元素  的选择器*/
.input tr td:first-child {
    width: 250px;
    text-align: center;
    background-color: #08a9df;
    color: white;
}

/*信息输入区域下的每行中第二个 td元素  的选择器*/
.input tr td:first-child + td {
    width: 300px;
}
/*信息输入区域下的每行中第三个 td元素  即信息的提示区域*/
.input tr td:first-child + td + td {
    padding-left: 5px;
    font-size: 13px;
    font-weight: 700;
}


    /*输入文本框样式*/
input[type='text'],input[type='password'] {
    width: 100%;
    height: 33px;
    line-height: 33px;
    font-size: 15px;
    border: 1px solid white;
}

input[type='text']:hover,input[type='password']:hover,input[type='text']:focus, input[type='password']:focus {
    /* :hover 伪类选择器  当鼠标移动到输入框 或正在输入时 边框为蓝色 */
    border: 1px solid #00C1B3;
}



/*文本域样式*/
textarea {
    font-size: 15px;
    width: 100%;
    border: none;
    overflow: hidden; /*当文字输入超出区域大小时 也不显示滚动条*/
    resize: none; /*在页面中不可调节大小的css属性*/

}

/*下拉列表样式*/
select {
    height: 35px;
    margin-left: 10px;
    border: none;
}


/*------------------华丽的分隔线--------------------*/


/*
    下方按钮区域样式
*/
div.button {
    margin-top: 15px;
    text-align: center;
    width: 100%;
}

/*提交按钮.普通按钮.重置 样式*/
input[type='submit'], input[type='button'], input[type='reset'] {
    margin: 0 60px;
    width: 100px;
    height: 30px;
    border: 1px solid #B6B6B6;
}

/*------------------华丽的分隔线--------------------*/
